<template>
  <PrimaryTable
    :data="tableData"
    :columns="columns"
    :loading="loading"
    :pagination="pagination"
    v-bind="$attrs"
    @page-change="handlePageChange"
  >
    <slot></slot>
    <template v-if="slots.expandedRow" #expandedRow="props">
      <slot name="expandedRow" v-bind="props">
      </slot>
    </template>
    <template #loading>
      <BkLoading />
    </template>
    <template #empty>
      <BkException type="empty" />
    </template>
  </PrimaryTable>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { type PrimaryTableProps, PrimaryTable } from '@blueking/tdesign-ui';
import { useRequest } from 'vue-request';

interface IProps {
  source: (params?: Record<string, any>) => Promise<unknown>;
  columns?: PrimaryTableProps['columns'];
}

const { source, columns } = defineProps<IProps>();

const slots = defineSlots();

const tableData = ref<any[]>([]);

const pagination = ref<PrimaryTableProps['pagination']>({
  current: 1,
  pageSize: 10,
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 0,
});

let paramsMemo: Record<string, never> = {};

const offsetAndLimit = computed(() => {
  return {
    offset: pagination.value!.pageSize! * (pagination.value!.current! - 1) || 0,
    limit: pagination.value!.pageSize || 10,
  }
})

const { params, run: fetchData, loading } = useRequest(source, {
  manual: true,
  defaultParams: [offsetAndLimit.value],
  onSuccess: (response: { results: any[], count: number }) => {
    console.log('ag table params:', JSON.stringify(params.value));
    paramsMemo = { ...params.value[0] };
    if (response.results) {
      tableData.value = response.results
    }
    pagination.value!.total = response.count || 0;
  },
});

const handlePageChange = ({ current, pageSize }: { current: number, pageSize: number }) => {
  pagination.value!.current = current;
  pagination.value!.pageSize = pageSize;
  fetchData({
    ...paramsMemo,
    ...offsetAndLimit.value,
  });
}

onMounted(() => {
  fetchData({ ...offsetAndLimit.value });
})

defineExpose({
  fetchData: (params: Record<string, any>) => fetchData({ ...params, ...offsetAndLimit.value }),
})
</script>

<style lang="scss">
.t-table .t-loading svg.t-icon-loading {
  display: none !important;
}
</style>
